#pm_composer {

    /* COMPONNENT STRUCTURE */

    .composer-dropzone-wrapper { display: none }
    [class*="composer-draggable"] .composer-dropzone-wrapper {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        z-index: 90;
    }

    .composer-askEmbedding {display: none !important}
    .composer-dropzone {display: none}
    .composer-dropzone * {pointer-events: none}
    .composer-draggable .composer-dropzone,
    .composer-draggable-editor .composer-askEmbedding {display: flex !important}
    /* Button toggle BCC/CC */
    .composer-field-ToList .autocompleteEmails-admin { padding-right: 20px  }

    .composer {
        display: -webkit-flex;
        display: flex;

        -webkit-flex-direction:column;
        flex-direction: column; /* .editor space fill */

        position: absolute; /* better for iOS then fixed*/
        height: calc(100% - 100px) !important; // the drag directive tries to override this.
        max-height: 510px;
        right:  0 !important;
        transform: translateX(-20px);
        visibility: hidden;
        bottom: 1rem;
        z-index: 8888;

        /* STYLES */
        background:$white;
        will-change: transform;

        header, footer {
            line-height: $composerRowHeight;
        }

        .row {
            line-height: #{$composerRowHeight+1px}; // fixes a zoom bug for Chrome
        }

        .composer-meta:not(.composer-toggle-ccbcc) .ccRow,
        .composer-meta:not(.composer-toggle-ccbcc) .bccRow {display: none}
        .ccRow .composerInputMeta-overlay-button,
        .bccRow .composerInputMeta-overlay-button { display: none }

        .flex {
            -webkit-flex:1; /* ipad */
            flex:1;
            display:-webkit-flex;
            display: flex;
            min-height: 0px; /* trigger height change */
         }

        .fill {
          -webkit-flex:1; /* ipad */
          flex: 1;

          display: flex;
          display: -webkit-flex;

          max-height: 100%; /* scroll issue with attachments */
          width: 100%; /* scroll issue with attachments */

          -webkit-flex-direction: column;
          flex-direction: column;
        }

        &.composer-draggable-editor .composeEditor {
            position: relative; /* dropzone parent which is absolute */
        }

        .container-email{
            width: calc(100% - 40px); /* absolute pm_button .link*/
        }

        iframe {
            -webkit-flex:1;
            flex:1;

            position: relative;
            z-index: 4;
            width: 100%;
            height: 100%;
        }

        .dropzone {
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: 2000; // Needs to be greater than any other z-index element in the composer
            top: 0;
            left: 0;
            background: transparent;
            border: 0;
        }

        :not(.composer-draggable) .dropzone { display: none }

        .dz-message {
            position: absolute;
            width: 100%;
            z-index: 99;
            border: 1rem solid rgba(0, 0, 0, 0.05);
            background: white;
            left: 0;
            bottom: 26px;
            height: calc(58% - 8px);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 1 !important
        }

        &.expandRecipients .dz-message { height: calc(45% - 3px) }
        &.maximized .dz-message { height: 73% }
        &.expandRecipients.maximized .dz-message { height: 60% }

        .toolbar li {
          -webkit-flex:1;
          flex:1;
          cursor: pointer;
          height:$composerRowHeight;
          line-height:$composerRowHeight;
        }

        .fa {
            font-size: 14px;
            &.fa-minus {
                position: relative;
                top: 5px;
            }
        }

        .plain-text-icon {
            display: inline-block;
            width: 17px;
            height: 17px;
            background: url(assets('img/plaintext.svg')) no-repeat center;
        }

        .squire-popover.makeLink { right: 41px !important }
        .squire-popover.insertImage { right: 60px !important }

        .squire-popover-overlay {
            background: rgba(0,0,0,.2);
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            position: absolute;
            z-index: 2;
        }

        .attachmentBar {

            height: $composerRowHeight;
            line-height: $composerRowHeight;
            padding: 0 10px;
            cursor: pointer;
            z-index: 7;
            border-top: 1px solid $border;
            background: $tertiary;
            i {
                font-style: normal;
                &.embedded{
                    color: $primary;
                }
            }
            .fa {
                display: inline-block;
                line-height: $composerRowHeight;
                height: $composerRowHeight;
            }
        }

        .previews {
            padding-top: 10px;
            padding-left: 10px;

            overflow: auto;
            -webkit-overflow-scrolling: touch;
            background: $tertiary;

            .preview-close {
                margin-left: .25rem;
                color: $default-color;
            }

            .attachment{
                .fa{
                    margin-right: .5rem;
                    line-height: 34px;
                    float:left;
                    &.embedded{
                        color:$primary;
                    }
                }
                .preview-name{
                    float: left;
                    width: calc(100% - 4rem);
                }
            }

            footer {
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;
            }
            .pm_button {
                margin: 0 10px 10px 0;
                float: left;
                text-transform: initial;
                background: $white;
            }
        }

        &.attachmentsOpen {
            .previews {
                overflow: hidden;
                -webkit-overflow-scrolling: touch;

            }
            .attachmentBar {
                box-shadow: 0 1px 0 $border;
            }
            .attachmentArea {
                .pm_button {
                    color: $default-color;
                    border-radius: 2px;
                    width: 45%;
                    white-space: nowrap;
                    position: relative;
                    .preview-name {
                        overflow: hidden;
                        text-overflow: ellipsis;
                        padding-right: 1.25rem;
                        display: block;
                        height: 32px;
                    }
                    .preview-close {
                        position: absolute;
                        right: 0;
                        top: 0;
                        bottom: 0;
                        cursor: pointer;
                        padding: 0 .5rem;
                    }
                    &.uploading {
                        background: $default-color-light;
                    }
                }
            }
        }

        /* STATE CHANGE */


        @media (min-width:600px) {
          & {
            width: 600px;
            /* STYLES */
            box-shadow: $box-shadow;
            border-radius: 2px;
            overflow: hidden;
          }
        }

        &.small {
            height: 480px !important;
        }
        &.mini {
            height: 380px !important;
        }
        &.minimized {
            height: $composerRowHeight !important;
            overflow: hidden;
            padding: 0 !important;
            bottom: 0;
            header {
                border-radius: 2px;
                .fa.fa-minus {
                    top: -5px;
                }
            }
            & > div,
            & > footer {
                display: none;
            }
        }
        &.maximized {
            position: absolute;
            top: ($headerHeight + 20);
            right: 0;
            bottom: 20px;
            transition: none;
            transform: translateX(-20px) !important;
            width: calc(100% - #{$sidebarWidth} - 40px);
            height: auto !important;
            max-height: 100%;
            margin: 0;
            overflow: auto;

            header, footer {
                border-radius: 0;
            }
        }

        &.attachmentsOpen.moreAttachments {
            .previews {
                height: 111px;
                overflow: auto;
            }
        }

        /* COMPONNENT APPEARANCE */

        .dotdotdot {
            display: none;
        }

        &.blur {
            box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1),
                        0 0 2px rgba(0, 0, 0, 0.1);

            // Instead of setting opacity on every child element, add an overlay element with a transparent white background
            &:after {
                display: block;
                content: " ";
                z-index: 2000;
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: rgba(255,255,255,0.4);
                pointer-events: none;
            }
        }

        .row {
          border-bottom:1px solid $border;
          &.placeholder div{
                    color: $text;
                    overflow: hidden;
                    -o-text-overflow: ellipsis; /* for Opera 9 */
                    text-overflow: ellipsis; /* for the rest of the world */
                    white-space: nowrap;
                    display:block; /* webkit */
                    padding-right: 20px; /* button */
          }
          .overlay {
            position: absolute;
            z-index: 10;
            left: 0px;
            top:0px;
            width: 100%;
            height: 100%;
          }
        }

        input, select {
          font-size: 14px;
          color: #333;

        }

        .meta {
            color: $default-color-light;
            input, select{
                border:none;
                padding:none; /* iOS */
            }
        }

        .fromRow { color: $default-color }

        &.expandRecipients {
            overflow: hidden;
        }

        /* RESETS */
        /* Probably to move as a global reset scope */

        ul {
          margin:0px;
          padding:0px;
          list-style: none;
        }

        input,select {
          -webkit-appearance: none; /* DRY */
          -moz-appearance: none;
          appearance: none;
        }

        select::-ms-expand {
            display: none;
        }
        /* DRY */
        ::-webkit-input-placeholder {color: $default-color-light;}
        :-moz-placeholder {color: $default-color-light;}
        ::-moz-placeholder {color: $default-color-light;}
        :-ms-input-placeholder {color: $default-color-light;}

    }

}


#pm_composer .composer, .squireEditor-loaded {

    footer {
        line-height: $composerRowHeight;
        padding: 10px;
        background: $tertiary;
        border-top: 1px solid $border;

        &.disabled {

            .pm_button {
                pointer-events: none;
                opacity: .5;
            }
            .dead {
                pointer-events: none;
            }
        }

        .pm_button {
            line-height: $composerRowHeight;
            height: $composerRowHeight;
            padding: 0 1rem;
            background: $white;
            border: 1px solid $border;
            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
            &.primary {
                background: $primary;
            }
            &.disabled {
                background: black;
            }
        }

        .composer-btn-encryption {
            padding-top: 1px;

            .fa {
                font-size: 15px;
            }
        }

        .composer-btn-expiration {
            padding-top: 2px
        }
        .composer-btn-expiration svg {
            fill: $button-color
        }
        .composer-btn-expiration:hover svg,
        .composer-btn-expiration:focus svg {
            fill: $button-color-focus;
        }
        .composer-btn-expiration.primary:hover svg,
        .composer-btn-expiration.primary:focus svg,
        .composer-btn-expiration.primary svg {
            fill: $white;
        }

    }


    .row {
        display: -webkit-flex; /* ipad */
        display: flex;

        -webkit-flex-direction: row;  /* ipad */
        flex-direction: row;

        position: relative;
        padding: 0px 10px;

        label{
            padding-right: 10px;
        }

        input,
        select{
            height: $composerRowHeight;
            line-height: $composerRowHeight;
        }

        select {
            z-index: 2;
            background:transparent;
        }

        .pm_button.link {
            position: absolute;
            right: 7px;
            top: 0;
            line-height: $composerRowHeight;
            cursor: pointer;
        }

        &.placeholder,
        &.toRow {
            cursor: text;
        }

    }
}

/* when composer not maximized, text should be visually hidden */
.composer:not(.maximized) {
    .composer-btn-save-text,
    .composer-btn-discard-text {
        @extend .sr-only;
    }
}

/* RESPONSIVE */

@media screen and (max-width: $mobile-landscape) {
    #pm_composer .composer[style] {
        transition: none !important;
        transform: translateX(0) !important;
    }

    .appConfigBody-activeComposer {
        #pm_composer {
            display: block;
        }
    }
    html.protonmail {
        overflow: auto !important;
        height: initial;
        .appConfigBody-modalOpen,
        .appConfigBody-activeComposer {
            overflow: auto !important;
            height: initial;
            min-height: initial;
        }
    }
    .appConfigBody-maximizedComposer {
        #pm_main,
        #pm_sidebar {
            display: none;
        }
    }

    #pm_composer footer {
        .pm_button {
            padding:0px 10px !important;
            .composer-btn-save-text,
            .composer-btn-discard-text {
                /* equiv .sr-only
                 * but impossible to extend a class
                 * defined outside a breakpoint
                 */
                position: absolute;
                width: 1px;
                height: 1px;
                padding: 0;
                margin: -1px;
                overflow: hidden;
                clip: rect(0, 0, 0, 0);
                border: 0;
            }
            &.mobileFull {
                span {
                    display: block;
                }
            }
        }
    }

    .appConfigBody-is-mobile #outsideMessageWrap footer .pm_button span {display: block}
    .appConfigBody-is-mobile#eo-reply #message-body .squire-toolbar {padding: 0}
}

@media screen and (max-width: $mobile-portrait) {
    #pm_composer .composer[style] {
        left: 0;
    }
}

@media screen and (max-width: $tablet-landscape) {
    #pm_composer {
        .composer {
            header {
                .pm_button.maximize-button {
                    /*display: none;*/
                }
            }
            &.maximized {
                left:0 !important;
                top:0;
                width: 100%;
                height: 100% !important;
                transform: translateX(-0px) !important;
                border-radius: 0;
            }
        }
    }
}
@media screen and (max-width: $tablet-portrait) {
    #pm_composer {
        .composer {
            header {
                .pm_button.maximize-button {
                    display: none;
                }
            }
        }
    }
}


@media screen and (max-height: 500px) {
    #pm_composer {
        .composer {
            transition: none !important;
            transform: translateX(0) !important;
        }
        footer{
            position:relative;
            z-index: 10
        }
    }
}

.appConfigBody-is-mobile {
    .composer [data-ng-form^="composeForm"],
    .composer [ng-form^="composeForm"] {
        min-height: 250px !important;
    }
}
